<template>
    <div id="sift">
        <!-- 这是精选列表页面 -->
        <argainList title='严选专栏' class="argainList"></argainList>
        <ul>
            <li v-for="item in list" :key="item.id" @click="goSigtDetali(item.id)">
                <img :src="item.pic" alt="">
                <p class="p1">{{item.title}}</p>
                <p class="p2">{{item.descript}}</p>
                <p>查看详情</p>
            </li>
        </ul>
    </div>
</template>

<script>
import argainList from '@/components/home/argainList/argainListTitle'
import { getArticle } from '../../utils/api/Home'

export default {
    data() {
        return {
            list:[]

        };
    },
    created() {
        getArticle().then(res => {
            console.log(res.data);
            this.list = res.data
        })
      
    },
    methods: {
          // 精选列表跳转到详情
        goSigtDetali(id){
            this.$router.push({
                path:'/sigtDetali',
                query:{
                    id
                }

            })
        }
    },
    //组件挂载
    components: {
        argainList
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#sift{
    background-color: #ffffff;
    .argainList{
        position: fixed;
        z-index: 2;
        top:0;
        background-color: #fff;
        width: 100%;
    }
    ul{
        width: 100%;
        margin-top: 1.3rem;

        li{

            width: 97%;
            height: 3.8rem;
            position: relative;
            font-size: .5rem;
            color: #FFF;
            margin: .1rem;
            img{
                width: 100%;
                height: 100%;
            }
            .p1{
                width: 86%;
                position: absolute;
                top: .6rem;
                font-size: .4rem;
                left: .6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
           
            .p2{
                width: 86%;
                position: absolute;
                top: 1.4rem;
                font-size: .3rem;
                left: .6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;

            }
             p:last-child{
                width: 30%;
                position: absolute;
                top: 2.1rem;
                font-size: .5rem;
                border-radius: 1rem;
                border: 1px solid #fff;
                left: 2.6rem;
                font-size: .3rem;
                height: .7rem;
                line-height: .7rem;
                text-align: center;


            }
        }
    
    }
}
</style>
